<template>
  <view class="flex justify-around align-center tabbar">
    <view class=" tabbarItem" v-for="(item,index) in tabbar" :key="index" @click="chooseTab(item,index)">
      <!--      <view class="iconww">
        <image class="" :src="intopath==index ? item.selectPath : item.path" mode="aspectFill"></image>
        <view class="messagePage_fd1_0_c0_c1">
          <benben-message-num v-if="index==3" class='messagePage_fd1_0_c0_c1' :message-num="paotuiNum" size='24'
            color='#fff' background-color='red'>
          </benben-message-num>
        </view>

        <benben-message-num v-if="index==2" class='messagePage_fd1_0_c0_c1' :message-num="xiaoxiNum" size='24'
          color='#fff' background-color='red'>
        </benben-message-num>
      </view> -->

      <view class="tabbartext" :class="intopath==index ? 'active' : ''" v-if="index!=2">{{item.name}}
        <view class="line" v-if="intopath==index"></view>
      </view>
      <view class="" v-if="index==2">
        <image class="iconss" :src="item.path" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    // name: 'fu-tabbar',
    props: {
      paotuiNum: {
        type: Number,
        default: 0,
      },
      xiaoxiNum: {
        type: Number,
        default: 0,
      },
      intopath: {
        type: Number,
        default: 1,
      }
    },
    data() {
      return {
        tabbar: [{
            // path: "/static/tab/tab_diy0.png",
            // selectPath: '/static/tab/tab_diy0_active.png',
            name: '首页'
          },
          {
            // path: "/static/tab/tab_diy1.png",
            // selectPath: '/static/tab/tab_diy1_active.png',
            name: '买卖'
          },
          {
            path: '/static/images/181.gif',
            name: ''
          },
          {
            // path: "/static/tab/tab_diy2.png",
            // selectPath: '/static/tab/tab_diy2_active.png',
            name: '行情'
          },
          {
            // path: "/static/tab/tab_diy3.png",
            // selectPath: '/static/tab/tab_diy3_active.png',
            name: '我的'
          }
        ],
        tabId: 0
      }
    },
    created() {},
    methods: {
      goLink() {
        uni.navigateTo({
          url: `/pages/wode/runningOrders/runningOrders`
        })
      },
      chooseTab(item, index) {
        this.intopath = index
        if (index == 0) {
          uni.reLaunch({
            url: '/pages/tabBar/index/index'
          })
          return;
        }
        if (index == 1) {
          uni.reLaunch({
            url: '/pages/tabBar/businessPage/businessPage'
          })
          return;
        }
        if (index == 2) {
          uni.reLaunch({
            url: '/pages/tabBar/release/release'
          })
          return;
        }
        if (index == 3) {
          uni.reLaunch({
            url: '/pages/tabBar/marketPage/marketPage'
          })
          return;
        }
        if (index == 4) {
          uni.reLaunch({
            url: '/pages/tabBar/myWode/myWode'
          })
          return;
        }
      }
    }
  }
</script>

<style lang="scss">
  .tabbar {
    position: fixed;
    bottom: 0;
    height: 100rpx;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0px -3px 6px 1px rgba(0, 0, 0, 0.07);

    .iconss {
      width: 100rpx;
      height: 100rpx;
      position: relative;
      top: -30rpx;
    }

    .tabbarItem {
      text-align: center;

      .tabbartext {
        font-size: 36rpx;
        color: #333;
        line-height: 100rpx;
        position: relative;

        .line {
          width: 24rpx;
          height: 6rpx;
          background-color: #2568AE;
          border-radius: 16rpx;
          position: absolute;
          bottom: 20rpx;
          left: 30%;
        }

        &.active {
          color: #2568AE;
          font-weight: 600;
        }
      }

      .iconww {
        width: 50rpx;
        height: 50rpx;
        display: block;
        margin: 0 auto;
        position: relative;

        image {
          width: 100%;
          height: 100%;
        }

        .messagePage_fd1_0_c0_c1 {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1111111;
        }
      }


    }
  }
</style>
